<template>
  <page-wrap back hide-tab title="服务营销页" stay-still :hideSafeArea="true">
    <view class="consultant-share">
      <view class="remind">每个地区的服务项目及价格不同，请先选择范围，再去分享</view>
      <view class="select-container">
        <view class="choose-project">
          <view style="display: flex; flex-direction: row; align-items: center"><span>项目范围</span>
            <view class="project-name" @click="showProjectList = true">
              <view class="title">
                {{ projectName }}
              </view>
              <view class="down-arrow"></view>
            </view>
          </view>
          <u-select class="project-select" v-model="showProjectList" :list="projectList" mode="single-column"
            value-name="cardType" label-name="cardName" @confirm="confirm"></u-select>
        </view>
        <view class="choose-project">
          <view style="display: flex; flex-direction: row; align-items: center"><span>分享形式</span>
            <view class="project-name" @click="showShareTypeList = true">
              <view class="title">{{ shareTypeName }}</view>
              <view class="down-arrow"></view>
            </view>
          </view>
          <u-select class="project-select" v-model="showShareTypeList" :list="shareTypeList" mode="single-column"
            value-name="labelValue" label-name="labelName" @confirm="shareTypeConfirm"></u-select>
        </view>
      </view>
      <view class="projects">
        <view class="pre-send-card" v-for="(item, index) in preSendCards" :key="index" @click="gotoShare(item)">
          <view class="left-image"></view>
          <view class="right-info">
            <span class="right-info-title">{{ item.productName }}</span>
            <span class="desc">{{ item.productDesc }}</span>
            <view class="price-info">
              <span class="current-price">￥{{ item.price }}</span>
              <view class="original-price">￥{{ item.originPrice }}
                <view class="red-line"></view>
              </view>
              <view class="falsh-sales">限时特惠</view>
              <view class="goto-share">去分享<view class="right-arrow"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <LoginDialog ref="loginDialog"></LoginDialog>
  </page-wrap>
</template>

<script>
import { getGroupCardTypeList, getProductGroup } from "@/api/modules/career";
import LoginDialog from "@/components/LoginDialog";
export default {
  components: { LoginDialog },
  data() {
    return {
      projectName: "请选择",
      shareTypeName: "海报",
      projectCardType: -10,
      shareType: 2,
      showProjectList: false, // 控制底部选择列表显示隐藏
      showShareTypeList: false,
      projectList: [], // 项目列表
      preSendCards: [], // 下面渲染的要发送的卡片
      productSign: "", // 当前所属项目sign
      cardTypeEncrypt: "", // cardType加密参数
      shareTypeList: [
        { labelValue: 1, labelName: "链接" },
        { labelValue: 2, labelName: "海报" },
      ],
    };
  },
  methods: {
    confirm(e) {
      this.projectName = e[0].label;
      this.projectCardType = e[0].value;
      this.projectList.forEach((item) => {
        if (item.cardName == e[0].label) {
          this.cardTypeEncrypt = item.cardTypeEncrypt;
        }
      });
    },
    shareTypeConfirm(e) {
      this.shareTypeName = e[0].label;
      this.shareType = e[0].value;
    },
    async getGroupCardTypeList() {
      const params = {};
      const res = await getGroupCardTypeList(params);
      if (res.code == 200) {
        this.projectList = res.data;
        this.projectName = res.data[0].cardName;
        this.projectCardType = res.data[0].cardType;
        this.cardTypeEncrypt = res.data[0].cardTypeEncrypt;
      }
    },
    async getProductGroup(cardType) {
      const params = {
        personId: "1",
        cardType: cardType,
        id: "1",
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.preSendCards = res.data[0].productList;
        this.productSign = res.data[0].productSign;
      }
    },
    gotoShare(item) {
      const personId = uni.getStorageSync("person-id");
      if (!personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      if (this.shareType == 1) {
        switch (this.productSign) {
          case "CONSULTE_SERVICE":
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/BuyPage?cardTypeEncrypt=${this.cardTypeEncrypt
                }&isConsultant=${true}&cardType=${this.projectCardType}`,
            });
            break;
          case "ZHITU_WUHAN_SERVICE":
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage?cardTypeEncrypt=${this.cardTypeEncrypt
                }&isConsultant=${true}&cardType=${this.projectCardType}`,
            });
            break;
          case "ZHITU_TOC_SERVICE":
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?cardTypeEncrypt=${this.cardTypeEncrypt
                }&isConsultant=${true}&cardType=${this.projectCardType}`,
            });
            break;
          default:
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?cardTypeEncrypt=${this.cardTypeEncrypt
                }&isConsultant=${true}&cardType=${this.projectCardType}`,
            });
            break;
        }
      } else {
        // 目前所有项目都支持海报分享
        uni.navigateTo({
          url: `/pagesSub/userCenter/careerPathV2/components/ConsultantPosters?isConsultant=${true}&i=${false}&t=${item.cardType
            }&k=${this.cardTypeEncrypt}&productSign=${this.productSign}`,
        });
      }
    },
  },
  created() {
    this.getGroupCardTypeList();
  },
  watch: {
    projectName: {
      handler(val) {
        if (val) {
          this.getProductGroup(this.projectCardType);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-message: $img-base + "careerPath/";

.consultant-share {
  width: 100%;

  .remind {
    width: 100%;
    background: #f8f1ec;
    color: #ff670f;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    text-align: center;
    height: 72rpx;
    line-height: 72rpx;
  }

  .select-container {
    display: flex;

    .choose-project {
      padding: 0 32rpx;
      margin-top: 24rpx;

      .project-select {
        width: 100rpx;
        height: 100rpx;
      }

      .project-name {
        width: 182rpx;
        height: 56rpx;
        background: #e9e9e9;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8rpx 22rpx;
        margin-left: 16rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;

        .title {
          width: 120rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }

        .down-arrow {
          width: 28rpx;
          height: 28rpx;
          color: #000000;
          margin-left: 10rpx;
          background-image: url($img-base + "career/right-arrow.png?v=1");
          background-size: 100% 100%;
          transform: rotate(90deg);
          margin-bottom: 10rpx;
        }
      }
    }
  }

  .projects {
    width: calc(100% - 32rpx);
    margin: 0 auto;
    padding: 0 24rpx;
    box-sizing: border-box;

    .pre-send-card {
      background-color: #ffffff;
      width: 100%;
      padding: 24rpx 20rpx 20rpx 20rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      position: relative;
      margin-top: 16rpx;

      .left-image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 5rpx;
        background-image: url($img-base-message + "salePic.png");
        background-size: 100% 100%;
        /* flex-basis: 140rpx; */
      }

      .right-info {
        position: relative;
        margin-left: 12rpx;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;

        .right-info-title {
          font-size: 32rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #000000;
        }

        .desc {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
          line-height: 40rpx;
          margin-top: 12rpx;
        }

        .price-info {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 12rpx;

          .current-price {
            font-size: 32rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            color: #f75a3e;
          }

          .original-price {
            margin-left: 18rpx;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #555550;
            position: relative;

            .red-line {
              width: 100%;
              height: 2rpx;
              background-color: #f75a3e;
              position: absolute;
              top: 45%;
            }
          }

          .falsh-sales {
            width: 104rpx;
            height: 40rpx;
            background: #fff2f0;
            border-radius: 4rpx;
            border: 2rpx solid #f75a3e;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ff411f;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;
          }

          .goto-share {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-weight: 400;
            font-size: 22rpx;
            color: #bfbfbf;
            margin-left: auto;
          }

          .right-arrow {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
            background-image: url($img-base + "career/right-arrow.png?v=1");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
